<template>
  <div class="checkbox-demo">
    checked的值：{{ checked }} <br>
    <wanglei-checkbox v-model="checked">备选项</wanglei-checkbox>
  </div>

  <div class="checkbox-demo">
    禁用状态: <br>
    <wanglei-checkbox v-model="checked1" disabled>备选项1</wanglei-checkbox>
    <wanglei-checkbox v-model="checked2" disabled>备选项</wanglei-checkbox>
  </div>

  <div class="checkbox-demo">
    多选框组：{{ checkList }}<br>
    <wanglei-checkbox-group v-model="checkList">
      <wanglei-checkbox label="复选框 A"></wanglei-checkbox>
      <wanglei-checkbox label="复选框 B"></wanglei-checkbox>
      <wanglei-checkbox label="复选框 C"></wanglei-checkbox>
      <wanglei-checkbox label="禁用" disabled></wanglei-checkbox>
      <wanglei-checkbox label="选中且禁用" disabled></wanglei-checkbox>
    </wanglei-checkbox-group>
  </div>

  <div class="checkbox-demo">
    中间状态：<br>
    <wanglei-checkbox v-model="checkAll" :half-checked="halfchecked" @change="handleCheckAllChange">Check all</wanglei-checkbox>
    <wanglei-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
      <wanglei-checkbox v-for="city in cities" :key="city" :label="city">{{city}}</wanglei-checkbox>
    </wanglei-checkbox-group>
  </div>

</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
export default defineComponent({
  setup() {
    const checked = ref(false)

    const checked1 = ref(false)
    const checked2 = ref(true)

    const checkList = ref(['选中且禁用','复选框 A'])

    const checkAll = ref(false)
    const halfchecked = ref(true)
    const checkedCities = ref(['Shanghai', 'Beijing'])
    const cities = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen']
    const handleCheckAllChange = (val: boolean) => {
      checkedCities.value = val ? cities : []
      halfchecked.value = false
    }
    const handleCheckedCitiesChange = (value: string[]) => {
      const checkedCount = value.length
      checkAll.value = checkedCount === cities.length
      halfchecked.value = checkedCount > 0 && checkedCount < cities.length
    }

    return {
      checked,
      checked1,
      checked2,
      checkList,
      checkAll,
      halfchecked,
      checkedCities,
      cities,
      handleCheckAllChange,
      handleCheckedCitiesChange
    }
  }
})
</script>

<style scoped>
.checkbox-demo {
  margin: 20px 0;
}
</style>
